<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS轮播图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      user-select: none;
    }

    #container {
      width: 550px;
      height: 430px;
      margin: 100px auto 0;
      box-shadow: 0px 0px 10px 5px #cccccc;
      position: relative;
    }

   .img {
      width: 550px;
      height: 430px; 
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: all linear 1s;
    }

    #container .img.active {
      opacity: 1;
    }

   .img img {
      width: 100%;
      height: 100%;
    }

    #left,
    #right {
      height: 430px;
      line-height: 430px;
      width: 100px;
      text-align: center;
      font-size: 100px;
      font-weight: bold;
      color: pink;
      cursor: pointer;
      position: absolute;
      top: 0;
      background: rgba(0, 0, 0, 0.8);
      opacity: 0;
      transition: all linear.1s;
    }

    #left {
      left: 0;
    }

    #right {
      right: 0;
    }

    #container:hover #left,
    #container:hover #right {
      opacity:.5;
    }

    #container #left:hover,
    #container #right:hover {
      opacity: 1;
    }

    #more {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 5px;
      text-align: center;
    }

    #more span {
      width: 20px;
      height: 20px;
      display: inline-block;
      background: black;
      border-radius: 10px;
      margin-right: 10px;
      cursor: pointer;
      transition: all linear.1s;
    }

    #more span.active {
      background: rgb(255, 0, 99);
    }

    #more span:hover {
      background: rgb(255, 0, 99);
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="img"><img src="./1.jpg" /></div>
    <div class="img"><img src="./2.jpg" /></div>
    <div class="img"><img src="./3.jpg" /></div>
    <div class="img"><img src="./4.jpg" /></div>
    <div id="left">&lt;</div>
    <div id="right">&gt;</div>
    <div id="more"></div>
  </div>
  <script src="./re.js"></script>
  <script>
    var index = 0;
    var timer;
    $(".img").each(function (key, item) {
      if (key === index) {
        $("#more").append("<span class='active'></span>");
        $(this).addClass("active");
      } else {
        $("#more").append("<span></span>");
      }
    });

    $("#left").click(function () {
      if (index <= 0) {
        index = $(".img").length - 1;
      } else {
        index--;
      }
      $(".img").eq(index).addClass("active").siblings().removeClass("active");
      $("#more span").eq(index).addClass("active").siblings().removeClass("active");
    });

    $("#right").click(function () {
      if (index >= $(".img").length - 1) {
        index = 0;
      } else {
        index++;
      }
      $(".img").eq(index).addClass("active").siblings().removeClass("active");
      $("#more span").eq(index).addClass("active").siblings().removeClass("active");
    });

    $("#more span").click(function () {
      index = $(this).index();
      $(".img").eq(index).addClass("active").siblings().removeClass("active");
      $("#more span").eq(index).addClass("active").siblings().removeClass("active");
    });

    function autoplay() {
      if (index >= $(".img").length - 1) {
        index = 0;
      } else {
        index++;
      }
      $(".img").eq(index).addClass("active").siblings().removeClass("active");
      $("#more span").eq(index).addClass("active").siblings().removeClass("active");
    }

    timer = setInterval(autoplay, 1000);

    $("#container").mouseover(function () {
      clearInterval(timer);
    });

    $("#container").mouseout(function () {
      timer = setInterval(autoplay, 1000);
    });

    autoplay();
  </script>
</body>

</html>